import React from 'react'
import './index.scss'

const RatingStar = (props) => {
    const { rating } = props
    return <div className="component-rating-star">
        <section className="star_container">
            {
                [1, 2, 3, 4, 5].map(num => {
                    return <svg className="grey_fill" key={num}>
                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#star"></use>
                    </svg>
                })
            }
        </section>
        <div style={{ width: rating * 2 / 5 + 'rem' }} className="star_overflow">
            <section className="star_container" >
                {
                    [1, 2, 3, 4, 5].map(num => {
                        return <svg className="orange_fill" key={num}>
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#star"></use>
                        </svg>
                    })
                }
            </section>
        </div>
    </div>
}

export default RatingStar